<template>
  <div class="map_warp">
    <AmapView
      ref="amap"
      :map-style="currentStyle"
      :control-status="this.$store.getters.controlStatus"
      :orders="this.$store.getters.order.datas"
      :cars="this.$store.getters.car"
      :scale="showScalePlugs"
      :tool-bar-ruler="showToolBarRuler"
      :over-view="showOverView"
      @onOrderMenuClick="onOrderMenuClick"
      @onCarMarkerClick="onCarMarkerClick"
    />
    <div class="top_panel">
      <div class="left_panel"/>
      <div class="content_panel">
        <el-container style="height:100%" type="flex" direction="horizontal" class="countto-page-row">
          <a class="yuyue"> <UIcon :size="16" type="yuyue" title="预约单"/> </a>
          <a class="linshi"> <UIcon :size="20" type="linshi" title="临时单"/> </a>
          <a class="help"> <UIcon :size="16" type="question" title="求助"/></a>
          <a class="timeout"> <UIcon :size="16" type="lianjiechaoshi" title="超时及路线偏移"/> </a>
          <a class="error"> <UIcon :size="16" type="zhixingyichang" title="送货异常" /></a>
        </el-container>
      </div>
      <div class="right_panel">
        <a class="settingBut" @click="isShowSetting=true"> <UIcon :size="16" type="xitong" title="系统设置"/> </a>
      </div>
    </div>
    <!--系统设置区域-->
    <UDrawer :closable="true" :show.sync="isShowSetting" class-name="setting_pnel" width="300px" title="系统参数配制" placement="right" style="width: 300px">
      <div class="sett_item_warp"> <span>开启自动定位</span> <el-switch /></div>
      <div class="sett_item_warp"> <span>打開數據看板</span> <el-switch v-model="isShowDataPanel" /></div>
      <div class="sett_item_warp"> <span>显示工具条</span><el-switch v-model="showToolBarRuler" /></div>
      <div class="sett_item_warp"> <span>显示比例尺</span><el-switch v-model="showScalePlugs" /></div>
      <div class="sett_item_warp"> <span>显示鹰眼</span><el-switch v-model="showOverView"/></div>
      <div class="sett_item_warp">
        <span style="line-height: 3;">地图样式</span>
        <el-select v-model="currentStyle" size="small" >
          <el-option v-for="(item, key, index) in styles" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
      </div>
    </UDrawer>
    <!--数据看板-->
    <div v-if="isShowDataPanel" class="data_info">
      <div class="data_info_head"><span>数据面板</span></div>
      <div class="data_info_item" style="color:white" @click="showDataPanel(0)"> <span>配送中</span><span class="iconfont el">{{ this.$store.getters.order.ongoing }}</span></div>
      <div class="data_info_item" style="color:#1d99e4" @click="showDataPanel(1)"> <span>预约单</span><span class="iconfont el">{{ this.$store.getters.order.reservations }}</span></div>
      <div class="data_info_item" style="color:#9618f3" @click="showDataPanel(2)"> <span>临时单</span> <span class="iconfont el">{{ this.$store.getters.order.temporarys }}</span></div>
      <div class="data_info_item" style="color:#23d60f" @click="showDataPanel(3)"> <span>求助单</span> <span class="iconfont el">{{ this.$store.getters.order.helps }}</span></div>
      <div class="data_info_item" style="color:#ea9e0df5" @click="showDataPanel(4)"> <span>超时/偏移</span> <span class="iconfont el">0</span> </div>
      <div class="data_info_item" style="color:red"> <span>异常单</span> <span class="iconfont el">0</span></div>
    </div>
    <el-dialog :visible.sync="showAMapDialog" :append-to-body="true" top="35vh" title="设置金额" center width="400px">
      订单金额：
      <el-input
        v-model="orderMoney"
        type="number"
        placeholder="设置订单金额"/>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showAMapDialog = false">取 消</el-button>
        <el-button type="success" size="mini" @click="onSubmitOrder(true)">全额调派</el-button>
        <el-button type="primary" size="mini" @click="onSubmitOrder(false)">确 定</el-button>
      </span>
    </el-dialog>
    <a v-if="this.$store.getters.controlStatus === 1" class="exit" @click="changeControlStatus(0)"> <UIcon :size="16" type="tuichu" title="退出调派模式"/> </a>
  </div>

</template>

<script>

import AmapView from '@/components/AmapView'
import UIcon from '@/components/UIcon'
import UDrawer from '@/components/UDrawer'
import { sendorder } from '@/api/order'
import { mapActions, updatteModel } from 'vuex'
export default {
  components: { UIcon, AmapView, UDrawer },
  data: function() {
    return {
      orders: [],
      cars: [],
      isShowSetting: false,
      isShowDataPanel: true,
      currentStyle: 'dark',
      showScalePlugs: true,
      orderMoney: 0.0,
      showToolBarRuler: true,
      showAMapDialog: false,
      showOverView: true,

      styles: [
        { value: 'dark', label: '幻影黑' },
        { value: 'normal', label: '标准' },
        { value: 'whitesmoke', label: '远山黛' },
        { value: 'darkblue', label: '极夜蓝' },
        { value: 'light', label: '月光银' }
      ]
    }
  },
  mounted() {
    this.IM.addNewMessagHeandel('home', this.onMessage)
  },
  methods: {
    ...mapActions([
      'changeControlStatus',
      'changeOrderStatus',
      'addOrder',
      'removeOrder'
    ]),
    showDataPanel(index) {

    },
    onMessage(msg, ws) {
      if (msg.msgType === 1) {
        switch (msg.content.msgType) {
          case 1:
            this.addOrder(msg.content)
            break
          case 2: // 订单转单
            break
          case 3: // 订单配送点送达
            break
          case 4: // 订单完成
            this.removeOrder(msg.content)
            break
          case 5: // 订单调派
            this.changeOrderStatus(msg.content.orderId,2)
            break
        }
      }
    },
    onOrderMenuClick(index, order) {

    },
    onCarMarkerClick(index, car) {
      if (this.$store.getters.controlStatus === 1) {
        this.showAMapDialog = true
        this.orderMoney = this.$refs.amap.getCurrentOrder().totlaPrice
      }
    },
    onSubmitOrder(isFul) {
      var order = this.$refs.amap.getCurrentOrder()
      sendorder(this.$refs.amap.getCurrentCar().id, order.orderId, isFul ? order.totlaPrice : this.orderMoney)
        .then(res => {
          this.$message({
            message: '调派成功',
            type: 'success'
          })
          this.changeOrderStatus(order.orderId, 2)// 改变订单状态
          this.changeControlStatus(0)
        })
    }
  }
}
</script>
<style scoped>
  .map_spin{
    background-color: rgba(119, 118, 118, 0.64);
    color: white;
    z-index: 9999;
    cursor: progress;
  }
  .spin-icon-load{
    animation: ani-spin 1s linear infinite;
  }
  @keyframes ani-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  @keyframes bottom-fade-in {
    0% {
      opacity:0;
    }
    50% {
      opacity:0.5;
    }
    100% {
      visibility: visible;

      z-index: 9999;
      opacity:1;
    }

  }
  @keyframes bottom-fade-out {
    0% {
      opacity:1;
    }
    20% {
      opacity:0.8;
    }
    50% {
      opacity:0.5;
    }
    100% {
      z-index: 0;
      opacity:0;

    }
  }
  .bottom-in{
    animation:  bottom-fade-in 1s  linear forwards;
    -webkit-animation:bottom-fade-in 1s  linear forwards;
  }
  .bottom-out{
    animation:  bottom-fade-out 1s  linear forwards;
    -webkit-animation:  bottom-fade-out 1s linear forwards;
  }
  .show{
    display:block;
  }
  .hide{
    display: none;
  }
  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .vertical-center-modal .ivu-modal{
    top: 0;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .map_warp{
    height: 100%;
    position: relative;
    width: 100%;

    .top_panel{
      position: absolute;
      top: 10px;
      z-index: 888 ;
      display: flex;
      width: 100%;
      .left_panel{
        flex: 1;
      }
      .content_panel{
        border: 1px solid white;
        background: white;
        min-width: 100px;
        height: 35px;
        margin: 0 auto;
        border-radius: 4px;
        a{
          height: 35px;
          width: 35px;
          line-height: 35px;
          align-items: center;
          text-align: center;
          border-right: 1px solid #e8eaec;
          :last-child{
            border-right: 0px solid #e8eaec;
          }
        }
        .linshi{
          i{
            color: #f50ab5 !important;
          }
        }
        .yuyue{
          color: #10c7f3f5;
        }
        .timeout{
          color: #ea9e0df5 ;
        }
        .help{
          color: #0f8e0e  ;
        }
        .error{
          color: red ;
        }
      }
      .right_panel{
        flex: 1;
        .settingBut{
          height: 35px;
          width: 35px;
          border-radius: 50%;
          display: -webkit-box;
          text-align: center;
          line-height: 35px;
          background: #353232c9;
          justify-content: center;
          display: flex;
          float:right;
          margin-right: 10px;
          color: white
        }
      }
    }
  }
  .data_info{
    width: 200px;
    position: absolute;
    top: 280px;
    left: 20px;
    min-height: 200px;
    background-color:rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    .data_info_head{
      background: rgba(0, 0, 0, 0.6);
      padding: 5px;
      text-align: center;
      color: white;
      border-bottom:0px solid rgba(0, 0, 0, 0.5);
    }
    .data_info_item{
      padding: 5px;
      display: flex;
      justify-content:space-between;
      cursor: pointer;
      border-bottom: 0px solid #e8eaec;
      .el{
        font-size: 10px;
        font-weight: 600;
        color: yellow;
        &:after{
          content: "\e633";
          margin-left: 10px;
          color: #808695;
        }
      }
      &:hover{
        background: rgba(0, 0, 0, 0.4);
      }
    }
  }
  .order_list{
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 300px;
    animation-fill-mode: forwards;
    background: #f7f7f78c;
    .title{
      height: 35px;
      width: 100;
      display: -webkit-box;
      justify-content: center;
      line-height: 35px;
      color: yellow;
      font-size: 16px;
      font-weight: 400;

    }
    .closeBut{
      position: absolute;
      right: 0px;
      top:0px;
      cursor: pointer;
    }

  }
  .sett_item_warp{
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    border-bottom: 1px solid #e8eaec;
    span{
      color: #606266;
      font-size: 12px;
    }
  }
  .exit{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    background: white;
    position: absolute;
    color: black;
    top: 10px;
    z-index: 9999;
    left: 15px;
  }
</style>
